<template>
  <div class="transfer-card">
    <div class="header">
      <span>学生输送情况</span>
      <span class="unit-text">单位/人</span>
    </div>
    <div class="statistics-row">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">体育系统输送</span>
          <span class="number">{{ sportsCount.toLocaleString() }}</span>
        </div>
      </div>
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">教育系统输送</span>
          <span class="number">{{ educationCount.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div class="chart" ref="lineChart" id="Chart5"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTransportData } from "@/api/statistics";

export default {
  data() {
    return {
      sportsCount: 0,
      educationCount: 0,
      chart: null,
      chartData: {
        categories: [],
        currentYear: [],
        lastYear: []
      }
    };
  },
  async created() {
    await this.drawChart();
  },
  methods: {
    async drawChart() {
      try {
        const res = await getTransportData({ year: new Date().getFullYear() });
        if (res && res.data) {
          this.sportsCount = res.data.sportsCount;
          this.educationCount = res.data.educationCount;
          this.chartData = {
            categories: res.data.categories,
            currentYear: res.data.currentYear,
            lastYear: res.data.lastYear
          };
          this.$nextTick(() => {
            this.initChart();
          });
        }
      } catch (error) {
        console.error("获取学生输送数据失败:", error);
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("Chart5"));
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["以往年度累计人数", "上一年度人数"],
          top: 0
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "40px",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.chartData.categories,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            name: "以往年度累计人数",
            type: "line",
            smooth: true,
            data: this.chartData.currentYear,
            itemStyle: {
              color: "#409EFF"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(64,158,255,0.2)"
                  },
                  {
                    offset: 1,
                    color: "rgba(64,158,255,0)"
                  }
                ]
              }
            }
          },
          {
            name: "上一年度人数",
            type: "line",
            smooth: true,
            data: this.chartData.lastYear,
            itemStyle: {
              color: "#67C23A"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(103,194,58,0.2)"
                  },
                  {
                    offset: 1,
                    color: "rgba(103,194,58,0)"
                  }
                ]
              }
            }
          }
        ]
      };
      this.chart.setOption(option);
      // 监听父元素大小变化
      const ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          if (this.chart) {
            this.chart.resize();
          }
        }
      });
      ro.observe(Chart);
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style scoped>
.transfer-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.unit-text {
  font-size: 14px;
  color: #999;
  font-weight: normal;
}

.statistics-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 4px;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 40px;
  background-color: #409eff;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.chart {
  width: 100%;
  height: 250px;
}
</style>
